<template>
  <div class="container bg-white infinite-list-wrapper"  v-loading="model.loading">
    <el-checkbox class="ml-3" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <span>接受记录: (未读 {{model.pageInfo.noread}} / 已读 {{model.pageInfo.total}} ) </span>
    <el-button class="ml-3" type="text" @click.stop="deleteMsg()" :disabled="checkedList.length === 0">批量删除</el-button>
    <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange" style="height: calc(100vh - 100px);overflow: auto;">
      <ul class="list-group" v-infinite-scroll="load" :infinite-scroll-disabled="!model.hasMore" id="msg-list">
        <li v-for="(item, index) in model.rows" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
          :key="index" @click="readMsg(item)" style="border: none;cursor: pointer;font-size: 16px;">
          <div class="d-flex align-items-center">
            <el-checkbox :label="item.id"></el-checkbox>
            <svg-icon icon-class="notice" class="mr-4" style="font-size: 25px;" :style="{color: item.state === 1 ? '#FFD000' : ''}"></svg-icon>
            <div>
              <p class="my-1">{{item.title}}</p>
              {{item.context}}
            </div>
          </div>
          <div>
            <span class="mr-5">{{$formatDateTime(item.receiveTime)}}</span>
            <el-button type="text" @click.stop="deleteMsg(item)">删除</el-button>
          </div>
        </li>
      </ul>

      <p class="text-center" v-if="model.loading">加载中...</p>
      <p class="text-center" v-if="!model.hasMore">没有更多了</p>
    </el-checkbox-group>
  </div>
</template>
<script>
import PagedList from "@/libs/PagedList";
import axios from 'axios'

export default {
  name: 'msg',
  title: '消息记录',
  data() {
    return {
      model: new PagedList("survey/message/receives", 20, {
        stage: 1
      }),
      multipleSelection: [],
      checkedList: [],
      checkAll: false,
      isIndeterminate: true
    }
  },
  mounted() {
    this.newSearch()
  },
  methods: {
    newSearch() {
      this.model.search()
    },
    load() {
      this.model.addLoad()
      this.checkedList = []
      this.checkAll = false
    },
    readMsg(msg) {
      if (msg.state === 2) {
        return
      }
      this.$get('survey/message/toRead/' + msg.id).then(res => {
        this.$store.dispatch('getMessage')
        msg.state = 2
        this.model.pageInfo.noread--
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCheckAllChange(val) {
      this.checkedList = val ? this.model.rows.map(item => item.id) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log('value', value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.model.rows.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.model.rows.length;
    },
    deleteMsg(msg) {
      this.$confirm(`确认删除 ${msg ? msg.title : this.checkedList.length + '条消息'} ?`, "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let ids = msg ? msg.id : this.checkedList.toString()
        axios.delete(`survey/message/receive/${ids}`).then(res => {
          console.log(res);
          if (res.data.code === "200") {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.$store.dispatch('getMessage')
            this.newSearch();
          } else {
            this.$codeError(res);
          }
        }).catch(error => {
          this.$catchError(error);
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });

    }

  }
}
</script>
<style lang='scss'>
#msg-list {
  .el-checkbox__label {
    display: none;
  }
}
</style>